<template>
    <div class="evaluate">
      <div class="evaluate_a">
        <div class="a_pj" v-if="size">
          <div class="a_sx">
            <img src="../../assets/images/index_reply.png" />
          </div>
          <div class="a_pjyh">
            <van-circle
              v-model="currentRate"
              :rate="rate"
              :stroke-width="60"
              layer-color="#12275e"
              :color="gradientColor"
              :size="size"
            />
          </div>
          <div class="a_pjys">70</div>
          <div class="a_pjpf">日睡眠评分</div>
          <p class="a_pjms">体动评价:偶尔</p>
          <div class="a_pjrs">
            <img src="../../assets/images/index_bjtime.png" />
            <span>入睡时间提醒</span>
          </div>
        </div>

        <div class="a_show">
          <ul >
            <li v-for="(item,index) in showDate" :index="index" :key="index">
              <p>{{item.value}}</p>
              <p>{{item.name}}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "homeEvaluate",
      data(){
          return{
            currentRate:80,
            rate:80,
            gradientColor: {
              '0%': '#2085f7',
              '100%': '#1a9af1'
            },
            size:'',
            showDate:[
              {
                name:'入眠时间',
                value:'20min',
              },
              {
                name:'睡眠时长',
                value:'7h26',
              },
              {
                name:'上床时间',
                value:'22:00',
              },
              {
                name:'醒来时间',
                value:'06:30',
              }
            ]
          }
      },
      created(){
        this.size= this.remToPx(2.6);
      },
      methods:{
        //rem转换px
        remToPx(rem) {
          var fontSize = document.documentElement.style.fontSize;
          return Math.floor(rem * fontSize.replace('px', ''));
        },

      }
    }
</script>

<style scoped lang="scss" type="text/css">
.evaluate{
  width:100%;
  .evaluate_a{
    padding: 0.6rem 0.3rem 0.2rem;
    .a_pj{
      .a_sx{
        width:0.66rem;
        height:0.66rem;
        background: #2256c6;
        border-radius: 100%;
        float:right;
        margin-right:1.34rem;
        margin-bottom:-0.66rem;
        img{
          width:0.38rem;
          height: 0.38rem;
          margin: 0.14rem;
          float:left;

        }
      }
      .a_pjyh{
        float:left;
        width:100%;
        text-align: center;
      }
      .a_pjys{
        float:left;
        margin-top:-2.5rem;
        text-align: center;
        width:100%;
        font-size: 1.4rem;
        color:#ffffff;
        font-weight: bold;
      }
      .a_pjpf{
        float:left;
        font-size: 0.3rem;
        color:#ffffff;
        margin-top: -1.15rem;
        text-align: center;
        width:100%;
      }
      .a_pjms{
        float:left;
        color:#13a0f2;
        font-size: 0.28rem;
        width:100%;
        text-align: center;
      }
      .a_pjrs{
        width:2.16rem;
        height:0.36rem;
        background: linear-gradient(90deg, #2b61e8, #09c0ec);
        background: -webkit-linear-gradient(90deg, #2b61e8, #09c0ec);
        background: -moz-linear-gradient(90deg, #2b61e8, #09c0ec);
        background: -ms-linear-gradient(90deg, #2b61e8, #09c0ec);
        float:left;
        border-radius:0.8rem;
        margin-left:calc(50% - 1.38rem);
        margin-top:0.2rem;
        padding:0.1rem 0.3rem;
      img{
        width:0.32rem;
        height:0.32rem;
        float:left;
      }
      span{
        font-size: 0.28rem;
        color:#ffffff;
        float:left;
        line-height: 0.36rem;
        margin-left: 0.1rem;
      }
      }
    }


    .a_show{
      width:100%;
      float:left;
      margin-top:0.4rem;
      ul{
        list-style: none;
        width:100%;
        float: left;
        li{
          width:25%;
          float:left;
          color:#ffffff;
          text-align: center;
          p:first-child{
            font-size: 0.4rem;
            font-weight: bold;
            float:left;
            width:100%;
          }
          p:last-child{
            font-size: 0.22rem;
            float:left;
            width:100%;
          }
        }
      }
    }
  }

}

</style>

